<template>
  <div>
    <div class="input-wrapper" :class="{'noPass':pass===false}">
      <input v-if="inputType==='account'" type="text" v-model="value" placeholder="请输入账号!" class="input-style">
      <input v-if="inputType==='password'" type="password" v-model="value" placeholder="请输入密码!" class="input-style">
      <input v-if="inputType==='email'" type="email" v-model="value" placeholder="请输入邮箱!" class="input-style">
    </div>
    <div class="valid-warning" :class="{'noPass':pass===false}">
      <span>{{warning}}</span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      inputType: {
        type: String
      }
    },
    data () {
      return {
        value: '',
        warning: '',
        pass: undefined
      }
    },
    methods: {
      initialize () {
        this.value = ''
        this.warning = ''
        this.pass = undefined
      },
      accountValid () {
        this.pass = !!this.value
        this.warning = !this.value ? '账号不准为空' : ''
      },
      passwordValid () {
        this.pass = !!this.value
        this.warning = !this.value ? '密码不准为空' : ''
      }
    },
    watch: {
      'value' (newValue, oldValue) {
        switch (this.inputType) {
          case 'account' :
            this.accountValid()
            break
          case 'password' :
            this.passwordValid()
            break
          default:
            this.accountValid()
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/style/common.styl";
  @import "valid.styl";
</style>
